// 要求： 
// 1. 使用 axios 发送请求
// 2. 设置 axios 请求根路径
// 3. 配合 async await 完成功能
// 上传头像
const upload = document.querySelector('#upload')
const avatar = document.querySelector('.figure img')

// 昵称
const nickname = document.querySelector('[name=nickname]')

// 省市区
const province = document.querySelector('[name=province]')
const city = document.querySelector('[name=city]')
const area = document.querySelector('[name=area]')


// 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

// 功能列表
// 功能1: 上传头像
// 模拟点击
avatar.addEventListener('click', function () {
  upload.click()
})
upload.addEventListener('change', async function () {

  console.log(111);
  const file = this.files[0]
  console.log(file);
  if (!file) {
    return
  }
  const fd = new FormData()
  fd.append('avatar', file)

  const { data: { data } } = await axios.post('/api/file', fd)
  console.log(data.url);
  // 渲染图片新地址
  avatar.src = data.url

})


// 功能2: 页面初始化: 获取个人信息，并渲染到页面中
async function init() {
  const { data: { data } } = await axios.get('/api/settings')
  console.log(data);
  nickname.value = data.nickname
  avatar.src = data.avatar
  // 省
  await getProvinceData()
  province.value = data.province
  // console.log(province.value);

  // 市
  await getCityData(data.province)
  city.value = data.city

  // 区
  await getAreaData(data.province, data.city)
  area.value = data.area

}
init()


// 省份数据
async function getProvinceData() {
  const { data: { data } } = await axios.get('/api/province')
  // console.log(data);
  const proStr = data.map(item => {
    return `
    <option value="${item}">${item}</option>
    `
  }).join('')
  // console.log(proStr);
  province.innerHTML = proStr
}

// 市数据
async function getCityData(proVal) {
  const { data: { data: city1 } } = await axios.get('/api/city', {
    params: {
      pname: proVal
    }
  })
  // console.log(city1);
  const cityStr = city1.map(item => {
    return `
        <option value="${item}">${item}</option>
        `
  }).join('')
  // console.log(cityStr);
  city.innerHTML = ' <option value="">--市--</option>' + cityStr
}

// 区县数据
async function getAreaData(proVal, cityVal) {
  const { data: { data: area1 } } = await axios.get('/api/area', {
    params: {
      pname: proVal,
      cname: cityVal
    }
  })
  // console.log(area1);
  const areaStr = area1.map(item => {
    return `
        <option value="${item}">${item}</option>
        `
  }).join('')
  // console.log(areaStr);
  area.innerHTML = ' <option value="">--区--</option>' + areaStr
}



// 功能3: 省市区的联动效果
//  改变省份下拉框的值
province.addEventListener('change', async function () {
  //  console.log( this.value);
  // provinceData = this.value
  await getCityData(this.value)

  area.innerHTML = ' <option value="">--区--</option>'

})



//  改变城市下拉框的值
city.addEventListener('change', async function () {
  // 获取区信息
  await getAreaData(province.value, this.value)

})



// 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
//        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况
document.querySelector('form').addEventListener('submit', async function (e) {
  e.preventDefault()

  console.log(nickname.value);
  const res = await axios.put('/api/settings', {

    nickname: nickname.value,
    province: province.value,
    city: city.value,
    area: area.value,
    avatar: avatar.src

  })
  console.log(res);
  init()

})

